<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的成绩</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #container{
            height:940px;
            background:#DCDCDC;
        }
        #nav {

            height: 50px;
            background: #2C2C2C;
            margin-bottom: 1px;
            
        }

        #nav a {
            text-decoration: none;
            display: inline-block;
            color: #FFFFFF;
            line-height: 50px;
            font-family: "华文彩云";
            width: 33.15%;
            text-align: center;
            font-size: 2em;
        }

        #nav a:hover {
            color: white;
            background: blue;
        }

        #content {
            width: 1120px;
            height: 600px;
            /* border: 1px solid; */
            margin: 50px auto;
        }

        #content .title {
            line-height: 30px;
            font-family: "宋体";
            text-align: center;
            color: #666666;
        }

        #content div {
            /* border: 1px solid red; */
            width: 350px;
            height: 500px;
            float: left;
            margin: 60px 10px;
            background: #F3F3F3;
            box-shadow:2px 1px #ffffff;
        }

        #content img {
            width: 250px;
            margin: 50px auto;
            display: block;
        }
        #content img:hover{
            width:300px;
            box-shadow:1px 2px #2C2C2C;
            border-radius:10px;
            /* border:1px solid; */
        }

        .box p {
            text-align: center;
            margin:10px;
            font-family:"华文行楷";
            font-size:20px;
            display:none;
        }
        .box:hover p{
            display:block;
        }
    </style>
</head>

<body>
    <div id=container>
        <div id="nav">
            <a href="../html/home.html">主页</a>
            <a href="../html/hobby.html">爱好</a>
            <a href="../html/collect.html">收藏</a>
        </div>
        <div id="content">
            <div class="box">
                <p>我的歌单</p>
                <img src="../images/music.png" alt="">
            </div>
            <div class="box">
                <p>我的成绩</p>
                <img src="../images/scores2.png" alt="">
            </div>
            <div class="box">
                <p>了解更多</p>
                <img src="../images/wechat.jpg" alt="">
                <p>小哥哥小姐姐！</p>
                <p>想了解更多请扫描上方二维码</p>
            </div>
        </div>
    </div>

</body>

</html>